<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

	<f:view contentType="text/html">

		<h:head>
			<title>UsaPré</title>
			<ui:insert name="js" />
			<ui:insert name="css" />
			
			<style type="text/css">
				body {
					margin-left: 0px;
					margin-top: 0px;
					margin-right: 0px;
					margin-bottom: 0px;
				}
				a:link {
					color: #2f3191;
					text-decoration: none;
				}
				a:visited {
					text-decoration: none;
					color: #2f3191;
				}
				a:hover {
					text-decoration: underline;
					color: #0033FF;
				}
				a:active {
					text-decoration: none;
					color: #2f3191;
				}
				.logado{
					width: 150px; height: 20px; float:left; font-family:Tahoma, Geneva, sans-serif; font-size:14px; color:#2f3191; 
					margin: 25px 2px 0 10px; line-height: 20px;
				}
				.logado2 {	width: 400px; height: 25px; float:left; margin: 20px 0 0 40px; font-family:Tahoma, Geneva, sans-serif; color:#2f3191; font-size:14px;
					line-height: 25px;
				}
				.logado3 {	width: 400px; height: 25px; float:left; margin: 0 0 0 40px; font-family:Tahoma, Geneva, sans-serif; color:#2f3191; font-size:12px;
					line-height: 25px; 
				}
			</style>
		</h:head>

		<h:body>

			<h:panelGroup id="mensagens">
				<h:outputScript rendered="#{not empty facesContext.messageList}">
					<a4j:repeat value="#{facesContext.messageList}" var="message">
							alert("<h:outputText value="#{message.summary}" />");
						</a4j:repeat>
				</h:outputScript>
			</h:panelGroup>

			<div class="conteiner">

				<div class="topo">
					<div class="logo" align="center">
						<h:form>
							<a4j:commandLink action="#{telaInicialBean.inicio}">
								<img src="images/logo.gif" width="198" height="96" />
							</a4j:commandLink>
						</h:form>
					</div>
					
					<div class="topo_icone_config">
						<img src="images/topo_config.gif" width="40" height="96" />
					</div>
					
					<div class="topo_home">
						<h:form>
							<a4j:commandLink value="Página inicial" action="#{telaInicialBean.inicio}" />
						</h:form>
					</div>
					
					<div class="topo_home2">
						<img src="images/foto_logado.jpg" /><br /> <a href="#">Clique para alterar</a>
					</div>
					
					<div class="logado2"> Olá, 
						<strong><h:outputText value="#{logadoBean.usuario.nome}" /></strong>. Seja bem vindo!
					</div>
					
					<div class="logado3"><h:outputText value="#{logadoBean.usuario.email}" /></div>
					
				</div>

				<div class="faixa_azul"></div>	
				
				<div class="barra_cinza2">&nbsp;Gerenciamento de conta</div>
				
				<div class="barra_3" align="right">
					<div class="botoes_menu3" align="center"> Saldo Disponível: R$
						<h:outputText value="#{homeGerenciaBean.saldoDisponivel}">
							<f:convertNumber maxFractionDigits="2" minFractionDigits="2" locale="pt-BR" />
						</h:outputText>
					</div>
				</div>
				
				<div class="menu_lateral">
					<h:form>
					
						<div class="botoes_menu2" id="link5">
							&nbsp;
							<a4j:commandLink value="OFERTAS ESPECIAIS" action="#{logadoBean.goGerenciamentoContaOfertas}"/>
						</div>
						
						<div class="botoes_menu2" id="link5">
							&nbsp;
							<a4j:commandLink value="COMPARE PREÇOS" action="#{logadoBean.goGerenciamentoConsulteCompareProdutos}"/>
						</div>
					
						<div class="botoes_menu" id="link5">
							&nbsp;
							<a4j:commandLink value="Rede de desconto USACard PRÉ"
								action="#{logadoBean.goRedeDesconto}" />
						</div>
						<div class="botoes_menu" id="link5">
							&nbsp;
							<a4j:commandLink value="Rede de desconto USACard"
								action="#{logadoBean.goGerenciamentoRedeCompletaUsaCard}" />
						</div>
						<div class="botoes_menu" id="link5">
							&nbsp;
							<a4j:commandLink value="Meu USACard Pré"
								action="#{logadoBean.goGerenciamentoMeuUsaCardHistorico}" />
						</div>
						<div class="botoes_menu" id="link5">
							&nbsp;
							<a4j:commandLink value="Recarregue"
								action="#{logadoBean.goGerenciamentoRecarregueSeuCartao}" />
						</div>
						<div class="botoes_menu" id="link5">
							&nbsp;
							<a4j:commandLink value="Sair" action="#{telaInicialBean.sair}" />
						</div>

					</h:form>
				</div>
				<div class="caixa_extrato">

					<ui:insert name="mid"></ui:insert>

				</div>
				
				<div class="over_rodape"></div>
				
				<div class="rodape">
					<div class="rodape_part1">
						<img src="images/rodape1.gif" width="246" height="57" />
					</div>
					<div class="rodape_separador"></div>
					<div class="rodape_part2">

						<img src="images/rodape2_over_01.jpg" alt="" width="400"
							height="13" /> <a href="#"
							onmouseout="jQuery('#imgtwitterin').show(); jQuery('#imgtwitterout').hide();"
							onmouseover="jQuery('#imgtwitterin').hide(); jQuery('#imgtwitterout').show();">
							<img src="images/rodape2_normal_02.jpg" id="imgtwitterin"
							width="95" height="44" border="0" /> <img
							src="images/rodape2_over_02.gif" id="imgtwitterout" width="95"
							height="44" border="0" style="display: none;" />
						</a> <a href="#"
							onmouseout="jQuery('#facebookin').show(); jQuery('#facebookout').hide();"
							onmouseover="jQuery('#facebookin').hide(); jQuery('#facebookout').show();">
							<img src="images/rodape2_normal_03.jpg" id="facebookin" alt=""
							width="95" height="44" border="0" /> <img
							src="images/rodape2_over_03_.gif" id="facebookout" alt=""
							width="95" height="44" border="0" style="display: none;" />
						</a> <a href="#"
							onmouseout="jQuery('#mugbeein').show(); jQuery('#mugbeeout').hide();"
							onmouseover="jQuery('#mugbeein').hide(); jQuery('#mugbeeout').show();">
							<img src="images/rodape2_normal_04.jpg" id="mugbeein" width="117"
							height="44" border="0" /> <img src="images/rodape2_over_04.jpg"
							id="mugbeeout" width="117" height="44" border="0"
							style="display: none;" />
						</a> <a href="#"
							onmouseout="jQuery('#youtubein').show(); jQuery('#youtubeout').hide();"
							onmouseover="jQuery('#youtubein').hide(); jQuery('#youtubeout').show();">
							<img src="images/rodape2_normal_05.jpg" id="youtubein" width="79"
							height="44" border="0" /> <img src="images/rodape2_over_05.jpg"
							id="youtubeout" width="79" height="44" border="0"
							style="display: none;" />
						</a>


					</div>
					<div class="rodape_separador"></div>
					<div class="rodape_part3">SAC/OUVIDORIA 0300-210-4001</div>
				</div>
			</div>



		</h:body>

	</f:view>

</ui:composition>
